<template>
  <div>
    <el-button @click="saveData('updateServiceMain')">保存数据</el-button>
    <div id="updateServiceMain"></div>
  </div>

</template>

<script>
import '@/assets/XZReportDesigner/xzreportdesigner.js'
import '@/assets/XZReportDesigner/xzreportdesigner.css'
import { getxzdata } from '@/api/xzrd'

export default {
  data() {
    return {
      sheetDesign: null,
      options: {
        row: 100,
        col: 25,
        width: () => 1900,
        // width:()=>width
        // height:()=>height
        renderArrow: true,
        showFreeze: true,
        showGrid: true,
        showPreviewToolbar: true,
        showBottombar: true,
        showSelect: true,
        dataset: [
          {
            'id': 1,
            'value': '新建Json数据集'
          },
          {
            'id': 2,
            'value': '新建Http接口数据集'
          },
          {
            'id': 3,
            'value': 'API服务数据集'
          },
          {
            'id': 4,
            'value': '外部数据集'
          }
        ]
      }
    }
  },
  mounted() {
    this.options.onUpdateDatasetList = this.onUpdateDatasetList
    try {
      // eslint-disable-next-line no-undef
      this.sheetDesign = XZReportDesigner('#updateServiceMain', this.options)
    } catch (error) {
      console.log('..........created,throw errors:', error)
    }
  },
  methods: {
    onUpdateDatasetList() {
      return new Promise((resolve, reject) => {
        const rr = getxzdata('onUpdateDatasetList', '1', 'ext').then((res) => {
          return res.data
        })
        return resolve(rr)
      })
    },
    onUpdateData(datasets, params) {
      return new Promise((resolve, reject) => {
        getxzdata('onUpdateData', '1', 'ext').then((res) => {
          resolve(res.data)
        })
      })
    },
    saveData(reportDesignerPreviewId) {
      // config 为报表配置 ， data为 数据配置
      const { config, data } = this.sheetDesign.getData() // 报表设计器的保存事件
      // usePreStore.saveReportDesignerPreviewData(reportDesignerPreviewId, config, data)
      console.log(config)
      console.log(data)
    }

  }
}
</script>
